<!--  -->
<template>
    <div>
        <el-main>
            <el-table :data="tableData.records">
                <el-table-column prop="orderCode" label="订单号" width="390">
                </el-table-column>
                <el-table-column label="游戏名" width="320" :formatter="showGamesName">
                </el-table-column>
                <el-table-column prop="shouldPay" label="应付金额💵" width="120">
                </el-table-column>
                <el-table-column prop="realPay" label="实付金额💵" width="120">
                </el-table-column>
                <el-table-column label="下单时间" width="120" :formatter="showOrderTime">
                </el-table-column>
                <el-table-column label="查看详情" width="160">
                    <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-search" @click.native.prevent="showKeys(scope.row)" circle>查看激活码</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main> 
        <common-footer :pageData="tableData" ref="footData"></common-footer>
  </div>
</template>

<script>
import CommonFooter from '@/components/CommonFooter';
import axios from 'axios';
export default {
    name:'OrderShow',
    components: {CommonFooter},
    props:["page","pageSize"],
    data() {
        return {
            tableData:{},
            allGameSpecification:[],
            allGames:[],
            clientele:{},
        };
    },
    mounted() {
        this.$refs.footData.$on('pageSize',this.getPageSize);
        this.$refs.footData.$on('currentPage',this.getCurrentPage);
        axios.get(`/keyorder/selectByPage?page=${this.page}&pageSize=${this.pageSize}&clienteleId=${JSON.parse(localStorage.getItem('clientele')).id}`).then(
            response=>{
                this.tableData=response.data.data;
            }
        )
        axios.get('/game-specification/getAll').then(
            response=>{
                this.allGameSpecification=response.data.data;
            }
        )
        axios.get('/games/getAll').then(
            response=>{
                this.allGames=response.data.data;
            }
        )
    },
    methods: {
        getPageSize(pagesize){//修改每页数据个数，监控属性监控到自动调用请求查询
            this.tableData.size=pagesize;
        },
        getCurrentPage(currentpage){//修改当前页，监控属性监控到自动调用请求查询
            this.tableData.current=currentpage;
        },
        updataPageData(){//发送请求分页模糊查询，适用于更新完数据后刷新页面或者翻页，修改每页个数，查询等操作
            axios.get(`/keyorder/selectByPage?page=${this.tableData.current}&pageSize=${this.tableData.size}&clienteleId=${JSON.parse(localStorage.getItem('clientele')).id}`).then(
            response=>{
            this.tableData=response.data.data;
            });
        },
        showGamesName(row){//展示游戏名以及游戏规格
            var gameSpecificationName='';
            var gameId='';
            var gameName='';
            this.allGameSpecification.forEach((gameSpecification)=>{
                if(gameSpecification.id===row.specificationId){
                    gameId=gameSpecification.gameId;
                    if(gameSpecification.specification==="T"){
                        gameSpecificationName="标准版";
                    }else if(gameSpecification.specification==="S"){
                        gameSpecificationName="导剪版";
                    }else if(gameSpecification.specification==="G"){
                        gameSpecificationName="黄金版";
                    }else if(gameSpecification.specification==="L"){
                        gameSpecificationName="终极版";
                    }else{
                        gameSpecificationName="规格不详";
                    }
                    return;
                }
            })
            this.allGames.forEach((game)=>{
                if(game.id===gameId){
                    gameName=game.fullName;
                    return;
                }
            })
            return gameName+"---("+gameSpecificationName+")";
        },
        showOrderTime(row){//展示下单时间
            const date = new Date(row.createTime);
            const Y = date.getFullYear();//年
            const M = date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1;//月
            const D = date.getDate();//日      
            const h = date.getHours();//时
            const m = date.getMinutes();//分
            const s = date.getSeconds();//秒
            return Y+'年'+M+'月'+D+'日--'+h+'时'+m+'分'+s+'秒';
        },
        showKeys(val){//弹窗显示激活码
            alert(val.note);
        }
    },
    watch:{
        'tableData.size':{
            handler(newValue,oldValue){
              if(oldValue!==undefined){
                this.updataPageData();
              }
            }
        },
        'tableData.current':{
            handler(newValue,oldValue){
              if(oldValue!==undefined){
                this.updataPageData();
              }
            }
        }
      }
}
</script>
<style scoped>
</style>